<template>
  <el-card class="box-card">
    <el-form ref="formRef" :model="form" label-width="130px" :rules="rules">
      <intWrap
        v-for="item in intWrapArr"
        :disabled="testBoolead"
        :getKey="item"
      ></intWrap>
    </el-form>
    <button @click="checkAll">校验全部</button>
  </el-card>
</template>
<script lang="ts" setup>
import { reactive, ref, toRef, watch, provide } from 'vue';
import intWrap from '../../components/intWrap.vue';
import { checkFn } from '@/utils';

/* 表单 */
const form = reactive({
  userName: '',
  pasword: '',
  desc: '',
  step: null,
});

const testBoolead = ref(false);
/* 校验规则 */
const rules = {
  userName: [
    {
      required: true,
      message: '请输入账号',
      trigger: ['change', 'blur'],
    },
    {
      min: 3,
      max: 5,
      message: '长度应该在3~5之间',
      trigger: ['change', 'blur'],
    },
  ],
  pasword: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['change', 'blur'],
    },
    {
      min: 6,
      max: 8,
      message: '长度应该在6~8之间',
      trigger: ['change', 'blur'],
    },
  ],
  desc: [],
  step: [
    {
      required: true,
      message: '请输入限制',
      trigger: ['change', 'blur'],
    },
  ],
};

/* 配置项 */
const testConfig = {
  userName: {
    elItemConfig: {
      label: '请输入账号',
      propName: 'userName',
      rules: rules.userName,
      intType: [
        {
          componentType: 'input',
          bindValue: 'value1',
        },
      ],
    },
    elIntConfig: {
      value1: toRef(form, 'userName'),
      placeholder: '写入账号',
      autosize: null,
    },
  },
  pasword: {
    elItemConfig: {
      label: '请输入密码',
      propName: 'pasword',
      rules: rules.pasword,
      intType: [
        {
          componentType: 'input',
          bindValue: 'value1',
        },
      ],
    },
    elIntConfig: {
      value1: toRef(form, 'pasword'),
      placeholder: '写入密码',
      autosize: null,
    },
  },
  desc: {
    elItemConfig: {
      label: '请输入描述内容',
      propName: 'desc',
      rules: rules.desc,
      intType: [
        {
          componentType: 'textarea',
          bindValue: 'value1',
        },
      ],
    },
    elIntConfig: {
      value1: toRef(form, 'desc'),
      placeholder: '写入描述',
      maxWidth: '52',
      autosize: { minRows: 5, maxRows: 10 },
    },
  },
  step: {
    elItemConfig: {
      label: '限制数量',
      propName: 'step',
      rules: rules.step,
      intType: [
        {
          componentType: 'inputNum',
          bindValue: 'value1',
        },
      ],
    },
    elIntConfig: {
      value1: toRef(form, 'step'),
      placeholder: '填入限制',
      maxWidth: '30',
      limit: { min: 0, max: 10 },
      precision: 3,
    },
  },
};
const intWrapArr = Object.keys(testConfig);

const formRef = ref();
const checkAll = async () => {
  let res = await checkFn(formRef.value);
  console.log('结果', res);
  return res;
};

provide('testConfig', testConfig);

watch(
  () => form,
  () => {
    console.log('Form change', form);
  },
  { deep: true }
);
</script>

<style lang="scss">
.box-card {
  width: 95%;
  margin: 50px auto;
}
</style>
